<template>
  <div class="cart">
    <!-- 购物车商品 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车为空"
      v-if="cart.length === 0"
    />
    <template v-else>
      <van-swipe-cell v-for="prod in cart" :key="prod.id">
        <van-card
          :num="prod.amount"
          :price="prod.price | money"
          :desc="prod.desc"
          :title="prod.title"
          class="goods-card"
        >
          <template #thumb>
            <van-checkbox :value="prod.checked" @click="toggleChecked(prod.id)">
            </van-checkbox>
            <div class="van-image" style="width: 80%; height: 100%">
              <img
                :src="prod.image"
                class="van-image__img"
                style="object-fit: cover"
              />
            </div>
          </template>
          <template #num>
            <van-stepper
              :value="prod.amount"
              theme="round"
              button-size="22"
              @change="handleChange(prod.id,$event)"
            />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            @click="handleRemove(prod.id)"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </template>
    <!-- 提交订单 -->
    <van-submit-bar :price="totalMoney" button-text="提交订单" @submit="onSubmit">
      <van-checkbox :value="allChecked" @click="handleCheckAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    // 映射
    ...mapGetters(['allChecked', 'totalMoney']),
    cart() {
      return this.$store.state.cart
    }
  },
  methods: {
    // 方法映射过来
    ...mapMutations([
      'remove',
      'modifyAmount',
      'toggleChecked',
      'toggleCheckAll'
    ]), // 返回值是一个对象，各种方法
    // 删除购物车商品
    handleRemove(id) {
      this.remove(id)
    },
    // 修改数量
    handleChange(id, value) {
      console.log('修改数量', value)
      this.modifyAmount({
        id,
        amount: value
      })
    },
    // 全选
    handleCheckAll() {
      console.log('全选')
      this.toggleCheckAll(this.allChecked)
    },
    // 订单提交
    onSubmit() {
      console.log('订单提交')
      // 编程式导航跳转页面
      this.$router.push('/confirm')
      // this.$router.push({
      //   name: 'confirm',
      //   params: {
      //     // 动态路径参数
      //     id: 5,
      //     cid: 999
      //   }
      // }) // params 属性和 path 属性不能同时存在。当同时存在，会自动忽略 params 属性
    }
  }
}
</script>

<style lang="less" scoped>
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
/deep/.van-card__thumb {
  width: 240px;
  display: flex;
  justify-content: space-between;
}
</style>
